import type { App } from 'vue';
// 通用字体
import 'vfonts/Lato.css';
// 等宽字体
import 'vfonts/FiraCode.css';
import naive, { darkTheme, createDiscreteApi } from 'naive-ui';
import { lighten } from '@/utils';
import { useDesignSettingStoreOut } from '@/stores/modules/designSetting';
import type { NaiveMessageApi, NaiveDialogApi, NaiveNotificationApi, NaiveLoadingBarApi } from 'types/naive-ui';

export interface ICustomWindow extends Window {
  $message: NaiveMessageApi;
  $notification: NaiveNotificationApi;
  $dialog: NaiveDialogApi;
  $loadingBar: NaiveLoadingBarApi;
}

/**
 * 挂载 Naive-ui 脱离上下文的 API
 * 如果你想在 setup 外使用 useDialog、useMessage、useNotification、useLoadingBar，可以通过 createDiscreteApi 来构建对应的 API。
 * https://www.naiveui.com/zh-CN/dark/components/discrete
 */
export function setupNaiveUi(app: App<Element>) {
  const designStore = useDesignSettingStoreOut();

  const configProviderPropsRef = computed(() => ({
    theme: designStore.darkTheme ? darkTheme : undefined,
    themeOverrides: {
      common: {
        primaryColor: designStore.appTheme,
        primaryColorHover: lighten(designStore.appTheme, 6),
        primaryColorPressed: lighten(designStore.appTheme, 6),
      },
      LoadingBar: {
        colorLoading: designStore.appTheme,
      },
    },
  }));
  const { message, dialog, notification, loadingBar } = createDiscreteApi(['message', 'dialog', 'notification', 'loadingBar'], {
    configProviderProps: configProviderPropsRef,
  });

  (window as unknown as ICustomWindow)['$message'] = message;
  (window as unknown as ICustomWindow)['$dialog'] = dialog;
  (window as unknown as ICustomWindow)['$notification'] = notification;
  (window as unknown as ICustomWindow)['$loadingBar'] = loadingBar;

  app.use(naive);
}
